<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>宿舍助手 UI 原型</title>
  <style>
    body {
      font-family: sans-serif;
      margin: 0;
      padding: 15px;
      background-color: #f6f6f6;
      color: #333;
    }

    .header {
      text-align: center;
      padding: 15px 0;
      background-color: #fff;
      border-radius: 8px;
      margin-bottom: 15px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .header h1 {
      font-size: 1.5em;
      margin: 0;
      color: #34c759;
    }

    /* Green theme */
    .card {
      background-color: #fff;
      border-radius: 8px;
      padding: 15px;
      margin-bottom: 15px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    }

    .card h2 {
      font-size: 1.1em;
      margin-top: 0;
      margin-bottom: 10px;
      border-left: 4px solid #34c759;
      padding-left: 8px;
    }

    .ai-feature {
      border: 1px dashed #34c759;
      padding: 10px;
      margin-top: 10px;
      border-radius: 5px;
      background-color: #eafaea;
    }

    .ai-feature p {
      margin: 5px 0;
      font-size: 0.9em;
    }

    .ai-feature strong {
      color: #1d7b38;
    }

    button {
      background-color: #34c759;
      color: white;
      border: none;
      padding: 10px 15px;
      border-radius: 5px;
      cursor: pointer;
      font-size: 1em;
      width: 100%;
      margin-top: 10px;
    }

    button:hover {
      background-color: #258e41;
    }

    .dorm-info {
      text-align: center;
      margin-bottom: 15px;
      font-size: 1.1em;
    }

    .quick-actions {
      display: flex;
      justify-content: space-around;
      text-align: center;
      margin-bottom: 15px;
    }

    .action-item {
      font-size: 0.9em;
      color: #555;
    }

    .action-item img {
      width: 45px;
      height: 45px;
      display: block;
      margin: 0 auto 5px;
    }

    ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    li {
      padding: 10px;
      border-bottom: 1px solid #eee;
      font-size: 0.95em;
    }

    li:last-child {
      border-bottom: none;
    }

    .notice {
      background-color: #fffbe6;
      border: 1px solid #ffe58f;
      color: #d46b08;
      padding: 10px;
      border-radius: 5px;
      margin-bottom: 15px;
      font-size: 0.9em;
    }
  </style>
</head>

<body>

  <div class="header">
    <h1>宿舍助手</h1>
  </div>

  <div class="dorm-info card">
    <p>兰园 3栋 501室</p>
  </div>

  <div class="notice">
    <p><strong>AI 提醒:</strong> 检测到明天有雨，请记得提前收好阳台晾晒的衣物。</p>
  </div>

  <div class="quick-actions card">
    <div class="action-item">
      <img src="repair_placeholder.png" alt="报修">
      <span>一键报修</span>
    </div>
    <div class="action-item">
      <img src="bill_placeholder.png" alt="水电费">
      <span>水电查询</span>
    </div>
    <div class="action-item">
      <img src="schedule_placeholder.png" alt="值日表">
      <span>卫生值日</span>
    </div>
    <div class="action-item">
      <img src="visitor_placeholder.png" alt="访客">
      <span>访客登记</span>
    </div>
  </div>

  <div class="card">
    <h2>AI 水电费分摊</h2>
    <p>本月水电费账单已出，AI 帮你轻松分摊。</p>
    <p>总金额: ￥ 85.60</p>
    <div class="ai-feature">
      <p><strong>AI 计算:</strong> 根据历史用量和人数，建议每人分摊 ￥ 21.40。</p>
    </div>
    <button>查看详情并确认</button>
  </div>

  <div class="card">
    <h2>AI 智能报修</h2>
    <p>描述你的问题，AI 快速为你分配维修服务。</p>
    <!-- Placeholder for description input -->
    <div class="ai-feature">
      <p><strong>AI 分配:</strong> 检测到问题为“水龙头漏水”，已通知水电维修师傅。</p>
    </div>
    <button>提交报修</button>
  </div>

  <div class="card">
    <h2>宿舍公告</h2>
    <ul>
      <li>关于宿舍安全用电的通知 (昨天)</li>
      <li>期末宿舍卫生检查安排 (3天前)</li>
      <!-- Add more items here -->
    </ul>
    <button>查看更多</button>
  </div>

  <!-- Potential AI Roommate Matching (for specific scenarios like new student allocation) -->
  <!-- <div class="card">
        <h2>AI 室友匹配建议 (新生)</h2>
        <p>根据你的生活习惯，AI为你推荐合拍的室友。</p>
        <button>开始匹配</button>
    </div> -->

</body>
<!-- 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 -->

</html>